<template>
  <div class="examineHistory">
    <el-dialog title="事项审核" :visible.sync="showDialog" width="70%">
      <div class="tableBox">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="申请时间" width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.applyDate | formatTime }}</template>
          </el-table-column>
          <el-table-column prop="applyUserName" label="申请人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="implementName" label="实施清单" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalResult" label="审核内容" width="150"></el-table-column>
          <el-table-column
            prop="eventImplementationCharacterBefore"
            label="原内容"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="eventImplementationCharacterAfter"
            label="新内容"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="approvalUserName" label="审核人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalDate" label="审核时间" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalResult" label="审核结果" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalNote" label="审核意见" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <div class="reason">
        <h2>审核意见</h2>
        <el-form ref="form" v-model="form" label-width="100px" size="mini">
          <el-form-item label="审核决定" required>
            <el-radio-group v-model="form.opinion" size="medium">
              <el-radio border label="审核通过"></el-radio>
              <el-radio border label="审核不通过"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见" required>
            <el-input type="textarea" :rows="4" placeholder="请输入审核意见" v-model="form.reason"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center; display: block">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">提交申请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWaitHistoryList } from '@/api/itemManage';
export default {
  props: {
    selectItem: {
      type: Object,
      default: {}
    }
  },
  watch: {
    selectItem: function (newVal) {
      this.choiceItem = newVal;
    }
  },
  data() {
    return {
      form: {
        opinion: '',
        reason: ''
      },
      choiceItem: {},
      showDialog: false,
      tableData: [],
      current: 1, //当前页
      size: 5, //每页的数量
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.current = 1;
      this.size = val;
      this.initPage();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.initPage();
    },
    initPage() {
      getWaitHistoryList({
        eventId: this.choiceItem.id,
        pageNum: this.current,
        pageSize: this.size
      }).then((res) => {
        console.log(res);
        if (res.data.result) {
          this.tableData = res.data.result.records;
          this.total = res.data.result.total;
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.examineHistory {
  .fenye {
    margin: 20px 0;
    text-align: right;
  }
  h2 {
    font-weight: bold;
    padding-left: 10px;
    display: flex;
    align-items: center;
    margin: 10px 0;
    span {
      margin-left: 10px;
    }
  }
  .el-dialog__header {
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .el-form-item__content {
    display: flex;
  }

  .deleteItem {
    color: #f00;
  }
  .reason {
    h2 {
      font-weight: bold;
      margin: 20px 0;
    }
  }
}
</style>
